<template>
  <div class="thematic">
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="上架状态：">
        <el-select v-model="searchForm.status" filterable>
          <el-option v-for="item in typeList" :label="item.label" :value="item.id" :key="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标题：">
        <el-input v-model="searchForm.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="searchList" id="monitorEnter">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fn('add')">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border>
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="devs.length" label="楼盘数量"></el-table-column>
      <el-table-column prop="url" label="链接地址"></el-table-column>
      <el-table-column prop="status" label="上架状态">
        <template slot-scope="scope">
          {{scope.row.status == 1 ? '上架中': ''}}
          {{scope.row.status == 2 ? '待上架': ''}}
          {{scope.row.status == 3 ? '删除': ''}}
        </template>
      </el-table-column>
      <el-table-column label="创建时间">
        <template slot-scope="scope">
          <TimeComp :timestamp="scope.row.createTime"></TimeComp>
        </template>
      </el-table-column>
      <el-table-column label="更新时间">
        <template slot-scope="scope">
          <TimeComp :timestamp="scope.row.updateTime"></TimeComp>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope='scope'>
          <el-button type="text" @click="fn('view',scope.row)">查看</el-button>
          <el-button type="text" @click="fn('updown',scope.row)" v-show="scope.row.status === 2">上架</el-button>
          <el-button type="text" @click="fn('updown',scope.row)" v-show="scope.row.status === 1">下架</el-button>
          <el-button type="text" @click="fn('edit',scope.row)" :disabled="scope.row.status === 1">编辑</el-button>
          <el-button type="text" @click="fn('delete',scope.row)" :disabled="scope.row.status === 1">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagebar">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :total="totalSize">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import api from '@/api/apiPath'
  import TimeComp from '../../common/timeComp'
  export default {
    name: "ThematicPage",
    title:'专题页配置',
    components: {TimeComp},
    data () {
      return {
        searchForm: {
          status: undefined,
          name: undefined
        },
        typeList: [
          {id: undefined, label: '全部'},
          {id: 1, label: '上架中'},
          {id: 2, label: '待上架'},
        ],
        tableData: [],
        currentPage: 1,
        pageSize: 10,
        totalSize: 0
      }
    },
    created () {
      this.searchList()
    },
    activated(){
      this.searchList()
    },
    methods: {
      searchList () {
        let param = {}
        param.pageNum = this.currentPage
        param.pageSize = this.pageSize
        param.searchContent = this.searchForm.name
        param.status = this.searchForm.status
        this.axios.post(api.THEMATICPAGELIST, param).then(res => {
          this.tableData = res.data.data.list
          this.totalSize = res.data.data.total
        })
      },
      // 分页器改变页码
      handleCurrentChange () {
        this.searchList()
      },
      handleSizeChange (val) {
        this.pageSize = val
        this.searchList()
      },
      // 查看 编辑 删除 上下架
      fn (type, row) {
        if (type === 'add') { // 新增
          this.$router.push({path: '/operateThematicPage', query: {type: 'add'}})
        } else if (type === 'edit') { // 编辑
          this.$router.push({path: '/operateThematicPage', query: {id: row.id, type: 'edit'}})
        } else if (type === 'view') { // 查看
          this.$router.push({path: '/viewThematicPage', query: {id: row.id}})
        } else if (type === 'updown') { // 上下架'
          let param, title
          if (row.status == 1) {
            param = 2
            title = '下架'
          } else {
            param = 1
            title = '上架'
          }
          this.$confirm(`确定${title}当前的专题页?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.axios.post(api.THEMATICPAGEOPE,{id:row.id, status: param}).then(res => {
              this.$message.success(`${title}成功`)
              this.searchList()
            })
          }).catch(() => {});

        } else if (type === 'delete') { // 删除
          this.$confirm('确定删除当前的专题页?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.axios.post(api.THEMATICPAGEOPE,{id:row.id, status: 3}).then(res => {
              this.$message.success('删除成功')
              this.searchList()
            })
          }).catch(() => {});
        }
      }
    }
  }
</script>

<style scoped>

</style>
